<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Study Database</text>
      <view class="search-bar">
        <u-search
          v-model="searchQuery"
          placeholder="Search records..."
          :show-action="false"
          @change="onSearch"
        ></u-search>
      </view>
    </view>

    <!-- Database Content -->
    <scroll-view scroll-y class="content">
      <view class="section">
        <view class="section-header">
          <text class="section-title">Recent Records</text>
          <u-button type="primary" size="mini" @click="addNewRecord">Add New</u-button>
        </view>
        
        <view class="records-list">
          <view 
            v-for="record in filteredRecords" 
            :key="record.id"
            class="record-card"
          >
            <view class="record-header">
              <text class="record-title">{{ record.title }}</text>
              <text :class="['record-status', record.status]">{{ record.status }}</text>
            </view>
            <view class="record-content">
              <view class="record-field">
                <text class="field-label">Subject:</text>
                <text class="field-value">{{ record.subject }}</text>
              </view>
              <view class="record-field">
                <text class="field-label">Date:</text>
                <text class="field-value">{{ record.date }}</text>
              </view>
              <view class="record-field">
                <text class="field-label">Type:</text>
                <text class="field-value">{{ record.type }}</text>
              </view>
            </view>
            <view class="record-actions">
              <u-button type="info" size="mini" @click="editRecord(record)">Edit</u-button>
              <u-button type="error" size="mini" @click="deleteRecord(record)">Delete</u-button>
            </view>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-header">
          <text class="section-title">Statistics</text>
        </view>
        <view class="stats-grid">
          <view class="stat-card">
            <text class="stat-value">{{ totalRecords }}</text>
            <text class="stat-label">Total Records</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ activeRecords }}</text>
            <text class="stat-label">Active</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ completedRecords }}</text>
            <text class="stat-label">Completed</text>
          </view>
          <view class="stat-card">
            <text class="stat-value">{{ archivedRecords }}</text>
            <text class="stat-label">Archived</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      records: [
        {
          id: 1,
          title: 'Physics Exam Results',
          subject: 'Physics',
          date: '2024-03-15',
          type: 'Exam',
          status: 'completed'
        },
        {
          id: 2,
          title: 'Chemistry Lab Report',
          subject: 'Chemistry',
          date: '2024-03-14',
          type: 'Lab',
          status: 'active'
        },
        {
          id: 3,
          title: 'Math Assignment',
          subject: 'Mathematics',
          date: '2024-03-13',
          type: 'Assignment',
          status: 'archived'
        }
      ]
    }
  },
  computed: {
    filteredRecords() {
      if (!this.searchQuery) return this.records
      
      const query = this.searchQuery.toLowerCase()
      return this.records.filter(record => 
        record.title.toLowerCase().includes(query) ||
        record.subject.toLowerCase().includes(query) ||
        record.type.toLowerCase().includes(query)
      )
    },
    totalRecords() {
      return this.records.length
    },
    activeRecords() {
      return this.records.filter(r => r.status === 'active').length
    },
    completedRecords() {
      return this.records.filter(r => r.status === 'completed').length
    },
    archivedRecords() {
      return this.records.filter(r => r.status === 'archived').length
    }
  },
  methods: {
    onSearch() {
      // Implement search logic
    },
    addNewRecord() {
      uni.showToast({
        title: 'Adding new record',
        icon: 'none'
      })
    },
    editRecord(record) {
      uni.showToast({
        title: `Editing record: ${record.title}`,
        icon: 'none'
      })
    },
    deleteRecord(record) {
      uni.showModal({
        title: 'Confirm Delete',
        content: `Are you sure you want to delete "${record.title}"?`,
        success: (res) => {
          if (res.confirm) {
            // Implement delete logic
            uni.showToast({
              title: 'Record deleted',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.search-bar {
  margin: 20rpx 0;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.record-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.record-status {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.record-status.active {
  background-color: #e3f2fd;
  color: #1e88e5;
}

.record-status.completed {
  background-color: #e8f5e9;
  color: #43a047;
}

.record-status.archived {
  background-color: #eeeeee;
  color: #757575;
}

.record-content {
  margin-bottom: 15rpx;
}

.record-field {
  display: flex;
  margin-bottom: 8rpx;
}

.field-label {
  font-size: 26rpx;
  color: #666;
  width: 120rpx;
}

.field-value {
  font-size: 26rpx;
  color: #333;
}

.record-actions {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #4b7bec;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}
</style> 